<template>
  <el-col :span="columnNum" :offset="offset" style="padding: 0px 15px 15px 15px">
    <div style="padding: 10px 20px;min-height: 58px;line-height: 38px; " :style="{backgroundColor, color}">
      <span>{{classLabel}}</span>
      <span v-if="isShow" style="float: right;"> {{data}}{{classLabelUnit}}
           <svg-icon v-show="!disabled" class-name="el-icon-edit" icon-class="edit" class="table-td-input" style="margin-left: 5px"
                     @click="showClick()"/>
      </span>
      <el-input v-else v-model="data" style="float: right;width: 6rem" @blur="leaverFun()" ref="tagInput" v-focus :disabled="disabled"/>
    </div>
  </el-col>
</template>

<script>
  export default {
    props: {
      columnNum: {
        default: 8
      },
      offset:{
        default:0
      },
      backgroundColor:{
        default:'#DADFE7'
      },
      color: {
        default:'#555555'  
      },
      classLabel: {
        type: String,
        default: ""
      },
      classLabelUnit: {
        type: String,
        default: ""
      },
      className: {
        type: String,
        default: ""
      },
      fromData: {
        required: true
      },
      disabled:{
        type:Boolean,
        default:false
      },
      fixedNum:{
        type:Number,
        default:2
      }
    },
    data() {
      return {
        isShow: true,
        data: this.fromData
      }
    },
    created() {
      this.initData()
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.children[0].focus()
        }
      }
    },
    watch: {
      fromData: {
        deep: true,
        handler(data) {
          this.data = data;
        }
      },
      data: {
        deep: true,
        handler(data) {
          this.$emit("changeFromData", {name: this.className, value: data})
        }
      }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      async initData() {
      },
      showClick() {
        if(this.disabled)return
        this.isShow = false
      },
      leaverFun() {
        if (typeof this.data != "number" || this.data < 0) {
          this.data = 0
        }
        let that=this;
        let reg = /^\d+[.]?\d{0,that.fixedNum}$/;
        if (!reg.test(this.data)) {
          let num = Number(parseFloat(this.data).toFixed(that.fixedNum));
          if (num) {
            this.data = num
          } else {
            this.data = 0
          }
        }
        this.isShow = true
      },

    }
  }
</script>
